<template>
	<div class="edu-page-warp">
    <condition-card @reset="reset" @search="submit" style="background:#fff">

      <el-form :model="condition" label-position="left" label-width="100px">
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item :label="$t('courseArrange.preArrangeLog.dept')">
              <el-select
                v-model="condition.deptId"
                :placeholder="$t('message.plsSelect')"
                style="width: 100%"
              >
                <el-option
                  v-for="item in options.dept"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="  $t('auditLog.operationType') ">
              <el-select v-model="condition.profile" style="width: 100%">
                <el-option
                  v-for="item in options.operationType"
                  :key="item.label"
                  :label="item.label"
                  :value="item.label"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('courseArrange.preArrangeLog.codeOrName')">
              <el-input
                v-model="condition.keyWord"
                :placeholder="$t('courseArrange.preArrangeLog.plsInpuCodeOrName')"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="  $t('auditLog.terminalIp') ">
              <el-input v-model="condition.terminalip" :placeholder="$t('auditLog.inputterminalIp')"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form-item :label="$t('message.startTime') " class="no-bottom">
              <el-date-picker
                v-model="condition.startDate"
                :picker-options="pickerOptions"
                type="datetime"
                :placeholder=" $t('message.plsSelect') + $t('message.startTime')"
                format="yyyy/MM/dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                align="right"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item :label="$t('message.endTime') " class="no-bottom">
              <el-date-picker
                v-model="condition.endDate"
                :picker-options="pickerOptions"
                type="datetime"
                :placeholder="$t('message.plsSelect')+$t('message.endTime')"
                format="yyyy/MM/dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                align="right"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </condition-card>
		<div class="edu-page-title mg-top">{{ $t('auditLog.logList') }}</div>
		<el-card shadow="never" body-style="padding: 24px;">
			<el-table :data="tableData" style="width: 100%" stripe>
				<el-table-column
					:label="$t('courseArrange.preArrangeLog.code')"
					prop="operationuser"
					show-overflow-tooltip
				></el-table-column>
				<el-table-column
					:label="$t('courseArrange.preArrangeLog.name')"
					prop="userName"
					show-overflow-tooltip
				></el-table-column>
				<el-table-column :label="$t('courseArrange.preArrangeLog.dept')">
					<template slot-scope="props">
						<span slot="reference" :title="getDeptStr(props.row.deptId)">{{getDeptStr(props.row.deptId)}}</span>
					</template>
				</el-table-column>
				<el-table-column :label="$t('auditLog.terminalIp')" prop="terminalip" show-overflow-tooltip></el-table-column>
				<el-table-column
					:label="$t('courseArrange.preArrangeLog.operatingType')"
					prop="profile"
					show-overflow-tooltip
				></el-table-column>
				<el-table-column :label="$t('courseArrange.preArrangeLog.operatingTime')">
					<template slot-scope="props">
						<span slot="reference">{{props.row.createtime}}</span>
					</template>
				</el-table-column>
				<el-table-column :label="$t('message.operating')">
					<template slot-scope="scope">
						<el-button
							type="text"
							@click="getDetailById(scope.row.auditid)"
							size="mini"
						>{{ $t('message.detail') }}</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div class="edu-pagination">
				<div class="float-right">
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="page.pageNum_"
						:page-sizes="[20,50,100,500,1000]"
						:page-size="page.pageSize_"
						layout="total, sizes, prev, pager, next, jumper"
						:total="page.total_"
						style="float:right;margin-top:10px"
					></el-pagination>
				</div>
			</div>
		</el-card>
		<el-dialog
			:title="$t('courseArrange.preArrangeLog.detailPreArrLog')"
			width="60%"
			class="gCourseAddDialog"
			:visible.sync="showDialog"
			:close-on-click-modal="false"
		>
      <div class="details-table">
        <el-row class="row-height" type="flex" justify="center">
          <el-col :span="6">
            <div class="div-flex">
              <div class="div-flex-left">{{$t('courseArrange.preArrangeLog.code')}}</div>
              <div class="div-flex-last-right">{{auditLog.operationuser}}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="div-flex">
              <div class="div-flex-left">{{$t('courseArrange.preArrangeLog.name')}}</div>
              <div class="div-flex-last-right">{{auditLog.userName}}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="div-flex">
              <div class="div-flex-left">{{$t('auditLog.terminalIp')}}</div>
              <div class="div-flex-last-right">{{auditLog.terminalip}}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="div-flex">
              <div class="div-flex-left">{{$t('courseArrange.preArrangeLog.operatingTime')}}</div>
              <div class="div-flex-last-right">{{auditLog.createtime}}</div>
            </div>
          </el-col>
        </el-row>
        <el-row class="row-height" type="flex" justify="center">
          <el-col :span="24">
            <div class="div-flex">
              <div class="div-flex-left" style="flex: 1">{{$t('courseArrange.preArrangeLog.dept')}}</div>
              <div class="div-flex-last-right" style="flex: 11">{{auditLog.deptId}}</div>
            </div>
          </el-col>
        </el-row>
        <el-row class="row-height" type="flex" justify="center">
          <el-col :span="24">
            <div class="div-flex">
              <div class="div-flex-left" style="flex: 1">{{$t('courseArrange.preArrangeLog.operatingType')}}</div>
              <div class="div-flex-last-right" style="flex: 11">{{auditLog.profile}}</div>
            </div>
          </el-col>
        </el-row>
        <el-row class="row-height" type="flex" justify="center">
          <el-col :span="24">
            <div class="div-flex">
              <div class="div-flex-left" style="flex: 1">{{$t('arrangement.taskResultQuery.taskNO')}}</div>
              <div class="div-flex-last-right" style="flex: 11">{{auditLog.teachingClassId}}</div>
            </div>
          </el-col>
        </el-row>
        <el-row class="row-height" type="flex" justify="center">

          <el-col :span="24">
            <div class="div-flex">
              <div class="div-flex-left" style="flex: 1">{{$t('culturePlan.courseCode')}}</div>
              <div class="div-flex-last-right" style="flex: 11">{{auditLog.courseCode}}</div>
            </div>
          </el-col>
        </el-row>
        <el-row class="row-height" type="flex" justify="center">
          <el-col :span="24">
            <div class="div-flex">
              <div class="div-flex-left" style="flex: 1">{{$t('culturePlan.courseName')}}</div>
              <div class="div-flex-last-right" style="flex: 11">{{auditLog.courseName}}</div>
            </div>
          </el-col>

        </el-row>


      </div>
			<!--<el-form :model="auditLog" label-position="top" label-width="300px">
				<el-container>
					<el-main style="padding: 10;">
						<el-col :span="8">
							<el-form-item :label="$t('courseArrange.preArrangeLog.code')">
								<el-input v-model="auditLog.operationuser" readonly/>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item :label="$t('courseArrange.preArrangeLog.name')">
								<el-input v-model="auditLog.userName" readonly/>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item :label="$t('courseArrange.preArrangeLog.dept')">
								<el-input v-model="auditLog.deptId" readonly/>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item :label="$t('courseArrange.preArrangeLog.operatingTime')">
								<el-input v-model="auditLog.createtime" readonly/>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item :label="  $t('auditLog.terminalIp') ">
								<el-input v-model="auditLog.terminalip" readonly/>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item :label="$t('courseArrange.preArrangeLog.operatingType')">
								<el-input v-model="auditLog.profile" readonly/>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item :label="$t('arrangement.taskResultQuery.taskNO')">
								<el-input v-model="auditLog.teachingClassId" readonly/>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item :label="$t('culturePlan.courseCode')">
								<el-input v-model="auditLog.courseCode" readonly/>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item :label="$t('culturePlan.courseName')">
								<el-input v-model="auditLog.courseName" readonly/>
							</el-form-item>
						</el-col>
					</el-main>
				</el-container>
			</el-form>-->
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="cancelDialog">{{$t("message.close")}}</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import { getAuditLogById, getAuditLogList } from "common/src/api/auditLog";
import { findAllDeptList } from "common/src/api/user";
import UTILS from "common/src/utils/utils";
export default {
	name: "preArrangeLog",
	data() {
		return {
			showDialog: false,
			page: {
				pageNum_: 0,
				pageSize_: 20,
				total_: 0
			},

			condition: {
				auditname: "arrangementservice",
				modulename: "",
				keyWord: "",
				terminalip: "",
				dept: "",
				user: "",
				profile: "",
				startDate: "",
				endDate: "",
				code: 2
			},
			timeStr: {
				startStr: "",
				endStr: ""
			},
			auditLog: {},
			tableData: [],
			options: {
				dept: [],
				operationType: [
					{
						label: this.$t("courseArrange.preArrangeLog.openCourse")
					},
					{
						label: this.$t(
							"courseArrange.preArrangeLog.cancleOpenCourse"
						)
					},
					{
						label: this.$t("courseArrange.preArrangeLog.addTask")
					},
					{
						label: this.$t("courseArrange.preArrangeLog.delTask")
					},
					{
						label: this.$t("courseArrange.preArrangeLog.preArrange")
					},
					{
						label: this.$t(
							"courseArrange.preArrangeLog.canclePreArrange"
						)
					},
					{
						label: this.$t("courseArrange.preArrangeLog.arrange")
					},
					{
						label: this.$t(
							"courseArrange.preArrangeLog.cancleArrange"
						)
					},
					{
						label: "删除手动排课"
					},
					{
						label: "手动排课"
					},
					{
						label: "自动排教室"
					},
					{
						label: "设置方向数"
					},
					{
						label: "取消分配教室"
					},
					{
						label: "修改教学班发布状态"
					},
					{
						label: "删除某个教学班"
					}
				]
			},
			pickerOptions: {
				shortcuts: [
					{
						text: this.$t("courseArrange.preArrangeLog.today"),
						onClick(picker) {
							picker.$emit("pick", new Date());
						}
					},
					{
						text: this.$t("courseArrange.preArrangeLog.yesterday"),
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit("pick", date);
						}
					},
					{
						text: this.$t("courseArrange.preArrangeLog.weekAgo"),
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit("pick", date);
						}
					}
				]
			}
		};
	},
	mounted() {
		this.initOption();
		this.getAuditLogInfo();
	},
	methods: {
		initOption() {
			findAllDeptList().then(res => {
				if (res.code == 200) {
					for (const item of res.data) {
						this.options.dept.push({
							label: item.deptName + "(" + item.deptCode + ")",
							value: item.deptCode
						});
					}
				}
			});
		},
		getDeptStr(data) {
			if (!data) return "";
			let str = "";
			const temp = Array.from(new Set(data.split(",")));
			for (const item of temp) {
				for (const deptStr of this.options.dept) {
					if (item === deptStr.value) {
						str += deptStr.label + ",";
					}
				}
			}
			if (str != "") {
				str = str.slice(0, str.length - 1);
			}
			return str;
		},
		getDetailById(id) {
			getAuditLogById(id).then(response => {
				if (response.code == 200) {
					this.auditLog = response.data;
					this.auditLog.deptId = this.getDeptStr(
						response.data.deptId
					);
					const temp = JSON.parse(response.data.detail);
					if (this.empty(temp)) {
						let classStr = "";
						let courseCodesStr = "";
						let courseNamesStr = "";
						for (const item of temp.classCodes) {
							if (item != null) {
								classStr += item + ",";
							}
						}

						for (const item of temp.courseCodes) {
							courseCodesStr += item + ",";
						}

						for (const item of temp.courseNames) {
							courseNamesStr += item + ",";
						}

						this.auditLog.teachingClassId = this.getStr(classStr);
						this.auditLog.courseCode = this.getStr(courseCodesStr);
						this.auditLog.courseName = this.getStr(courseNamesStr);
					}
					this.showDialog = true;
				} else throw response.code;
			});
		},

		//判断对象是否是{}
		empty(data) {
			for (let key in data) {
				return true; //非空
			}
			return false; // 为空
		},
		getStr(str) {
			if (str != "") {
				str = str.slice(0, str.length - 1);
			}
			return str;
		},

		getAuditLogInfo() {
			getAuditLogList(
				this.page.pageNum_,
				this.page.pageSize_,
				this.condition
			).then(response => {
				if (response.code == 200) {
					this.tableData = response.data.list;
					this.page.pageNum_ = response.data.pageNum_;
					this.page.pageSize_ = response.data.pageSize_;
					this.page.total_ = response.data.total_;
				} else throw response.code;
			});
		},
		handleSizeChange(val) {
			this.page.pageSize_ = val;
			this.getAuditLogInfo();
		},
		handleCurrentChange(val) {
			this.page.pageNum_ = val;
			this.getAuditLogInfo();
		},
		reset() {
			(this.condition.auditname = "arrangementservice"),
				(this.condition.modulename = ""),
				(this.condition.terminalip = ""),
				(this.condition.keyWord = ""),
				(this.condition.profile = ""),
				(this.condition.startDate = ""),
				(this.condition.endDate = ""),
				(this.condition.deptId = ""),
				this.submit();
		},
		submit() {
			this.getAuditLogInfo();
		},
		//取消对话框
		cancelDialog() {
			this.showDialog = false;
		}
	}
};
</script>
<style lang="scss" scoped>
  .details-table {
    border: 2px solid #e5e9f2;
  }
  .row-height {
    height: 50px;
    text-align: center;
    border-bottom: 1px solid #e5e9f2;
    .div-flex {
      display: flex;
      height: 100%;
      &.div-left {
        justify-content: flex-start;
      }
      .div-flex-left {
        flex: 1;
        text-align: right;
        height: 100%;
        border-right: 1px solid #e5e9f2;
        background-color: rgba(245, 247, 249, 1);
        line-height: 50px;
      }
      .div-flex-last-right {
        flex: 2;

        text-align: center;
        line-height: 50px;
      }
    }
  }
</style>
